import { ColorRegexp } from '../../utils/const.js'

/**
 * 代理 Element 的 attributes 属性
 * @param {Element} el
 * @returns
 */
export function proxyAttribute(el) {
    return new Proxy(el, {
        get(t, p) {
            return t.getAttribute(p)
        },
        set(t, p, v) {
            if (v === null && t.hasAttribute(p)) {
                t.removeAttribute(p)
            } else {
                t.setAttribute(p, v)
            }
            return true
        },
        has(t, p) {
            return t.hasAttribute(p)
        },
        deleteProperty(t, p) {
            t.removeAttribute(p)
            return true
        },
        ownKeys(t) {
            return [...t.attributes].map(row => row.nodeName)
        },
    })
}

/**
 * 获取节点的 style css
 * @param {Element} el
 * @param {String} key style css name
 * @returns
 */
export function getCss(el, key) {
    return document.defaultView.getComputedStyle(el, null).getPropertyValue(key)
}

/**
 * 设置节点的 style css
 * @param {Element} el
 * @param {String} key
 * @param {String|Number|null|undefined|false} val
 */
export function setCss(el, key, val) {
    if (val === null || val === undefined || val === false) {
        el.style.removeProperty(key)
    } else if (el.parentElement && getCss(el.parentElement, key) === val) {
        el.style.removeProperty(key)
    } else {
        el.style.setProperty(key, val)
    }
}

export default class BaseElement extends HTMLElement {
    constructor() {
        super()
            // attribute 管理器
        this.attr = proxyAttribute(this)
    }

    /**
     * 设置 CSS 样式
     */
    getCss(key) {
        return getCss(this, key)
    }

    /**
     * 设置 CSS 样式
     */
    setCss(key, val) {
        setCss(this, key, val)
        return this
    }

    /**
     * 背景
     */
    get bg() {
        return this.getCss('background')
    }

    /**
     * 背景
     */
    set bg(val) {
        this.setCss('background', val)
    }

    /**
     * 背景色
     */
    get bgColor() {
        return this.getCss('background-color')
    }

    /**
     * 背景色
     */
    set bgColor(val) {
        if (!ColorRegexp.test(`${val}`)) {
            val = false
        }
        this.setCss('background-color', val)
    }

    /**
     * 背景图
     */
    get bgImage() {
        return this.getCss('background-image')
    }

    /**
     * 背景图
     */
    set bgImage(val) {
        if (typeof val === 'string' && val.length > 0) {
            if (!/^url\(.+\)?/.test(val)) {
                val = `url(${val})`
            }
        } else {
            val = false
        }
        this.setCss('background-image', val)
    }
}